WakuとCloudflare Pagesでマネして作るGitHub PR一覧サイト

Note

この記事は React Tokyo Advent Calendar 2025の一記事です。
React Tokyo Advent Calendar 2025はこちらからご覧ください。

はじめに

先日のReact Tokyo Advent Calendarで書かれたじょうげんさんの記事を読んで、自分のPRを可視化するのが面白いなと思いました。「自分の活動が一覧で見えると、モチベーション上がるのかな…」と思い、私も推しスタックの実装で作ってみることにしました。

今回は、Wakuという比較的新しいReactフレームワークとCloudflare Pagesを組み合わせて実装しました。シンプルながら高速で、メンテナンスしやすい構成になったので、その実装について紹介します。
Wakuは最近よく使っています。

WakuはReact Server Componentsをベースにした、軽量でミニマルなフレームワークです。今回PR一覧サイトを作るにあたって、以下の理由からWakuを選びました。

実際に使ってみて、設定が最小限で済み、コードもシンプルに保てるのが印象的でした。

インフラにはCloudflare Pagesを採用しました。Wakuで生成した静的ファイルをCloudflareのエッジネットワークから配信することで、世界中どこからアクセスしても高速にページが表示されます。

Cloudflare Pagesの良いところ：

デプロイはwrangler pages deploy一発で完了するので、開発体験も良好です。
実際にはGitHub Actionsを使って適宜更新をかけています。

PRデータの取得にはGitHub APIを使用しています。WakuのServer Componentsを活用することで、APIトークンをクライアントに露出させることなく、サーバーサイドで安全にデータを取得できます。

// Server Component内でのデータフェッチ例

const prs = await fetchPullRequests(username);

PRデータは頻繁に変わるため、定期的な更新が必要です。今回はGitHub Actionsで定期的にビルド・デプロイを実行することで、最新のPR情報を反映しています。

機能を絞り込むことで、コードもUIもシンプルに保ちました。PRの状態（Open/Merged/Closed）でフィルタリングできる機能と、各PRの詳細情報（コミット数、変更行数など）を一覧で確認できるようにしています。

元記事の作者さん含め、同じ「PR一覧サイト」でも選ぶ技術が異なるのが面白いところです。

開発者	インフラ	フレームワーク	特徴
じょうげんさん	Vercel	Next.js	Yamada UIでリッチなUI
ryoppippiさん	Cloudflare	Svelte	UnoCSS、軽量
Kanonさん	Cloudflare	HonoX	サーバーレス
ささぴよ	Cloudflare Pages	Waku	RSC、シンプル構成

それぞれの推し技術が反映されていて、同じ目的でもアプローチが全く違うのが面白いですね。そして、これくらいの規模感だと比較的簡単に完成品を作ることができるのがとても良いです。

Wakuはまだ新しいフレームワークですが、React Server Componentsの恩恵を受けながら、シンプルな実装ができる点が魅力的でした。大規模な機能は不要で、静的サイト生成で十分なプロジェクトには特に向いていると感じました。

一方で、エコシステムなどがまだ発展途上な部分もあると思いますので、既存のNext.jsやRemixと比べるとライブラリの選択肢は限られるかもしれません。とはいえ基本的な利用に際しては何も問題がなく、今後の発展に期待しつつ、徐々にプロジェクトで試していきたいと思います。

じょうげんさんの記事に触発されて、自分なりのPR一覧サイトをWakuとCloudflare Pagesで実装しました。シンプルな構成ながら、高速で保守しやすいサイトが作れたと思います。

自分にとっては、活動が可視化されたことで「これだけ頑張ったのかー」となって、モチベーションをキープできる気がしました。皆さんもぜひ、自分だけのPRダッシュボードを作ってみてはいかがでしょうか。異なる技術スタックで実装するのも面白いですよ！